import React from 'react';
import * as THREE from 'three';
import GSAP from 'gsap';
import Scene from '../Scene';

export default class Controls {
    constructor(){
        this.scene = new Scene();
        this.canvasScene = this.scene.scene;
        this.camera = this.scene.camera;
        this.progress = 0;
        // 控制相机非均匀运动
        this.lerp = {
            current:0,
            target:0,
            ease:0.1
        };
        this.position = new THREE.Vector3(0, 0, 0);
        this.lookAtPosition = new THREE.Vector3(0, 0, 0);

        // 计算向量叉乘，始终指向中心点
        this.directionalVector = new THREE.Vector3(0, 0, 0);
        this.staticVector = new THREE.Vector3(0, 1, 0);
        this.crossVector = new THREE.Vector3(0, 0, 0);

        // let vec1 = new THREE.Vector3(3, 1, 0);
        // let vec2 = new THREE.Vector3(3, 0, 1);
        // console.log(new THREE.Vector3().subVectors(vec1, vec2));
        // 控制相机沿着样条曲线运动
        this.setPath();      
        this.onWheel();
    }
    setPath(){
        this.curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-20, 0, 0),
            new THREE.Vector3(0, 0, -20),
            new THREE.Vector3(20, 0, 0),
            new THREE.Vector3(0, 0, 20)
        ], true)     
        // this.curve = new THREE.CatmullRomCurve3( [
        //     new THREE.Vector3( -10, 0, 10 ),
        //     new THREE.Vector3( -5, 5, 5 ),
        //     new THREE.Vector3( 0, 0, 0 ),
        //     new THREE.Vector3( 5, -5, 5 ),
        //     new THREE.Vector3( 10, 0, 10 )
        // ] );
        const points = this.curve.getPoints( 50 );
        const geometry = new THREE.BufferGeometry().setFromPoints( points );
        const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
        // Create the final object to add to the scene
        this.canvasScene.add(new THREE.Line(geometry, material));
    }
    onWheel(){
        window.addEventListener('wheel', (e)=>{
            if ( e.deltaY < 0 ) {
                // 滚轮向上
                this.back = false;
                this.lerp.target += 0.01;
            } else {
                // 滚轮向下
                this.back = true;
                this.lerp.target -= 0.01;
            }
        })
    }
    // update(){
    //     // 根据样条曲线上的点，每一帧更新相机的定位
    //     this.lerp.target = GSAP.utils.clamp( 0, 1, this.lerp.target);
    //     this.lerp.current = GSAP.utils.interpolate(
    //         this.lerp.current,
    //         this.lerp.target,
    //         this.lerp.ease
    //     );
    //     // this.back值标记正交相机沿着轨迹线方向是正向还是负向
    //     if ( this.back ) {
    //         this.lerp.target -= 0.001;
    //     } else {
    //         this.lerp.target += 0.001;
    //     }
    //     // %是因为只能取0-1区间的值
    //     this.curve.getPointAt(this.lerp.current, this.position);
    //     this.curve.getPointAt(this.lerp.current + 0.0001, this.lookAtPosition);
    //     this.camera.orthographicCamera.position.copy(this.position); 
    //     this.camera.orthographicCamera.lookAt(this.lookAtPosition);
    // }
    update(){
        this.lerp.target = GSAP.utils.clamp( 0, 1, this.lerp.target);
        this.lerp.current = GSAP.utils.interpolate(
            this.lerp.current,
            this.lerp.target,
            this.lerp.ease
        );
        this.curve.getPointAt(this.lerp.current % 1, this.position);
        this.camera.orthographicCamera.position.copy(this.position);
        
        // this.camera.orthographicCamera.lookAt(new THREE.Vector3(0, 0, 0));
        // 通过当前点和下一个点的向量计算出切线向量
        this.directionalVector.subVectors(this.curve.getPointAt(this.lerp.current % 1 + 0.001 ), this.position);
        this.directionalVector.normalize();
        
        this.crossVector.crossVectors(this.directionalVector, this.staticVector);
        // 乘以标量是因为计算出的向量都是基于世界坐标系原点来定义的，保证向量点是看向外部
        this.crossVector.multiplyScalar(100);
        this.camera.orthographicCamera.lookAt(this.crossVector);
        // 
    }
}